<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
		<textarea placeholder="请输入要评论的内容(最多吐槽120字)" v-model="msg" maxlength="120" cols="30" rows="5"></textarea>
		<mt-button type="primary" size="large" @click="addComment">发表评论</mt-button>
		<!-- 评论内容 -->
		<div class="cmt-list">
			<div class="cmt-item" v-for="item in commentList" :key="item">
				<div class="cmt-title">1楼 用户:一月 发布时间:2020-10-25:12:00:00</div>
				<div class="cmt-body">内容: 弱小和无知不是生存的障碍,傲慢才是</div>
			</div>
		</div>
		<mt-button type="danger" size="large" @click="getComments" plain>加载更多>>></mt-button>
	</div>
</template>

<script>
import {Toast} from 'mint-ui';
export default {
	name: 'comment',
	data(){
		return {
			pages: 1,
			msg: "",
			commentList: new Array(4)
		};
	},
	methods:{
		getComments(){
			this.commentList = this.commentList.concat(new Array(4))
		},
		addComment(){
			// TODO 发起提交,组织数据

			if(this.msg.trim() == ""){
				Toast({
                    message: '请输入点内容再提交',
                    position: 'middle',
                    duration: 3000
                });
			}else{
				this.commentList.unshift(this.msg)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.cmt-container{
	h3{
		font-size: 18px;
	}
	textarea{
		font-size: 14px;
		height: 100px;
		margin: 0;
	}
	.cmt-list{
		.cmt-item{
			&:nth-child(odd){
				background-color: #e5e8ce;
			}
			&:nth-child(even){
				background-color: #edf6fb;
			}
			font-size: 14px;
			margin: 10px 0;
		}
	}
}
</style>>